<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理当前课程</title>
    <script src="../js/jquery-1.7.2.js"></script>
    <style type="text/css">
        <!--
        /************ Table ************/
        .xwtable {
            width: 50%;
            border-collapse: collapse;
            border: 1px solid #ccc;
        }

        .xwtable thead td {
            font-size: 12px;
            color: #333333;
            text-align: center;
            repeat-x top center;
            border: 1px solid #ccc;
            font-weight: bold;
        }

        .xwtable tbody tr {
            background: #fff;
            font-size: 12px;
            color: #666666;
        }

        .xwtable tbody tr.alt-row {
            background: #f2f7fc;
        }

        .xwtable td {
            line-height: 20px;
            text-align: left;
            padding: 4px 10px 3px 10px;
            height: 18px;
            border: 1px solid #ccc;
        }

        -->
    </style>
</head>
<body>
<h1>管理课程号为<span id="showCid">1</span>的课程的选课情况</h1>
<table id="list" style="border-style: solid;border-width: 2px" class="xwtable">
</table>
<div id="page"></div>
</body>
<script>
    $(function () {
        let pageNum = 1;
        let pageSize = 5;

        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }

        let cid = getUrlParam("cid");
        $("#showCid").html(cid)
        load(pageNum, pageSize);

        function load(pn, ps) {
            $.ajax({
                type: "get",
                url: "/course/findStu/" + cid + "?pageNum=" + pn + "&pageSize=" + ps,
                success: function (r) {
                    if (r.ok) {
                        $("#list").empty();
                        $("#list").append("<tr>\n" +
                            "        <th>学号</th>\n" +
                            "        <th>学生用户名</th>\n" +
                            "        <th>操作</th>\n" +
                            "    </tr>")
                        $("#page").empty();
                        let users = r.result.data.list;
                        for (let i = 0; i < users.length; i++) {
                            console.log(users[i])
                            let user = users[i];
                            $("#list").append("<tr><td>" + user.id + "</td><td>" + user.username + "</td>" +
                                "<td><a href='javascript:;' id='del' val=" + "'" + user.id + "'" + ">删除</a></td>" +
                                "</tr>");
                        }
                        let page = r.result.data;
                        if (page.hasPreviousPage) {
                            $("#page").append("<button id='prePage' val=" + "'" + page.prePage + "'" + ">上一页</button>")
                        }
                        for (let i = 1; i <= page.pages; i++) {
                            $("#page").append("<button id='gotoPage' val=" + "'" + i + "'" + ">" + i + "</button>")
                        }
                        if (page.hasNextPage) {
                            $("#page").append("<button id='nextPage' val=" + "'" + page.nextPage + "'" + ">下一页</button>")
                        }
                    } else {
                        alert(r.msg)
                    }
                }
            });
        }

        $(document).on('click', '#del',function(event) {
            let uid = $(event.target).attr("val");
            console.log(cid)
            $.ajax({
                type:"get",
                url:"/course/deleteforcourse?uid="+uid+"&cid="+cid,
                success: function(r){
                    alert(r.msg)
                    if(r.ok){
                        pageNum = 1;
                        pageSize = 5;
                        load(pageNum,pageSize)
                    }
                }
            });
        });
    })
</script>
</html>